<template>
  <div class="cs-echarts">
    <chart :options="option" v-if="this.option.series.length > 0"></chart>
    <v-no-data v-else></v-no-data>
  </div>
</template>

<script type="text/ecmascript-6">
  import VNoData from '../../../../../components/VNoData/VNoData'

  export default {
    name: 'cs-echarts',
    components: { VNoData },
    data () {
      return {
        option: {
          title: {
            text: ''
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            padding: [0, 20],
            type: 'scroll',
            data: []
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            top: '20%',
            containLabel: true
          },
          toolbox: {
            right: '4%',
            top: '7%',
            feature: {
              magicType: {show: true, type: ['line', 'bar']}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: []
          },
          yAxis: {
            type: 'value'
          },
          series: []
        }
      }
    },
    methods: {
      getEchartsData (object) {
        this.option.legend.data = []
        this.option.xAxis.data = []
        this.option.series.splice(0, this.option.series.length)
        if (Object.keys(object).length === 0) {
          return
        }
        object.legend_list.forEach(item => {
          this.option.legend.data.push(item)
        })
        object.xaxis_list.forEach(item => {
          this.option.xAxis.data.push(item)
        })
        object.series_list.forEach(item => {
          this.option.series.push(item)
        })
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .cs-echarts
    .echarts
      width 100%
</style>
